<template>
  <div id="login">
    <header>
      <div class="header-title">个人理财财务系统</div>
      <div class="header-text">
        <span @click="handerNavbar('login')">首页</span>
        <span @click="handerNavbar('main-second')">系统介绍</span>
        <span @click="handerNavbar('main-third__form')">加入系统</span>
        <span>新手指导</span>
        <div class="header-button" @click="handerNavbar('main-third__form')">
          登录
        </div>
      </div>
    </header>
    <div class="main main-first" @mousewheel.prevent="mousePoll">
      <div class="main-first-content">
        <div class="main-first-content__h1">个人<b>理财</b>财务系统</div>
        <div>更便捷 易操作 便查找</div>
        <div
          class="main-first-content__button"
          @click="handerNavbar('main-third__form')"
        >
          登录
        </div>
        <a
          href="#/login"
          class="main-first-content__text"
          @click="handerNavbar('main-second')"
          >往下看看</a
        >
        <div style="margin-top: 2%" class="main-first-content__text">
          提高信息处理的速度和准确性等功能为一体的个人理财财务系统
        </div>
      </div>
      <div class="ball ball1"></div>
      <div class="ball ball2"></div>
      <div class="ball ball3"></div>
    </div>
    <div class="main main-second" id="main-second">
      <div class="main-second-left">
        <div class="main-second-left__h1">ABOUT US</div>
        <div>
          个人理财财务的管理与安排更加便捷 操作过程也更加容易 便于用户查找
        </div>
        <div class="main-second-left__text">
          同时也提高信息处理的速度和准确性等功能为一体的个人理财财务系统
        </div>
      </div>
      <div class="main-second-right">
        <div class="main-second-right__item">
          <i class="el-icon-mobile"></i>
          <span>稳定性</span>
        </div>
        <div class="main-second-right__item">
          <i class="el-icon-collection"></i>
          <span>简易性</span>
        </div>
        <div class="main-second-right__item">
          <i class="el-icon-coin"></i>
          <span>可靠性</span>
        </div>
        <div class="main-second-right__item">
          <i class="el-icon-set-up"></i>
          <span>实用性</span>
        </div>
      </div>
    </div>
    <div class="main main-third">
      <div class="main-third__form">
        <div class="main-third__form-title">USE PROGRAM</div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm"
        >
          <el-form-item prop="age">
            <el-input
              placeholder="账户"
              v-model.number="ruleForm.age"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              登录/注册
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <footer></footer>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      mousepollShow: true,
      ballScale: 1,
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      slideDown: 0,
      // 用户输入验证
      rules: {
        // 密码
        pass: [{ validator: validatePass, trigger: "blur" }],
        // 确认密码
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        // 用户名
        name: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {},
  methods: {
    // 导航栏点击事件
    handerNavbar(item) {
      document.getElementsByClassName(item)[0].scrollIntoView();
    },
    // 滚轮滑动
    mousePoll(e) {
      let directionY = e.deltaY > 0 ? "down" : "up";
      let directionX = e.deltaX > 0 ? "left" : "right";
      // 获取各个小球
      let ball1 = document.getElementsByClassName("ball1")[0];
      let ball2 = document.getElementsByClassName("ball2")[0];
      let ball3 = document.getElementsByClassName("ball3")[0];
      // 节流
      if (this.mousepollShow) {
        this.mousepollShow = false;
        // 上下滑动
        if (directionY === "down" || directionY === "up") {
          // 判断是否离得太远
          if (this.ballScale < 1.5 && this.ballScale > 0.5) {
            this.ballScale =
              directionY === "down"
                ? this.ballScale + 0.1
                : this.ballScale - 0.1;
          } else {
            this.ballScale =
              directionY === "down"
                ? this.ballScale - 0.1
                : this.ballScale + 0.1;
          }
          ball1.style.transform = `scale(${this.ballScale})`;
          ball2.style.transform = `scale(${this.ballScale})`;
          ball3.style.transform = `scale(${this.ballScale})`;
        }
        if (directionX === "left") {
          // 滑轮向left滚动
          ball1.style.left = `35%`;
          ball2.style.left = "8%";
          ball3.style.right = "8%";
        } else {
          // 滑轮向right滚动
          ball1.style.left = `45%`;
          ball2.style.left = "12%";
          ball3.style.right = "12%";
        }
// 如果一直向下滑动 就到下一面
        if (this.slideDown > 1 && directionY === "down") {
          document.getElementsByClassName("main-second")[0].scrollIntoView();
          this.slideDown = 0;
        } else {
          this.slideDown = this.slideDown + 1;
        }
        this.mouseShow();
      }
    },
    // 节流
    mouseShow() {
      const betterFn = () => {
        setTimeout(() => {
          this.mousepollShow = true;
        }, 2000);
      };
      betterFn();
    },
    mousePrevent(site, event) {
      console.log(site, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "恭喜你，登录成功啦～",
            type: "success",
          });
          this.$router.push("/home");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
#login {
  height: 200vh;
}
header {
  width: 100%;
  min-width: 1200px;
  height: 70px;
  position: absolute;
  top: 0px;
  z-index: 100;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  display: flex;
  justify-content: space-between;
}
/* header:hover {
  background: rgba(255, 255, 255, 0.1);
} */
.header-title {
  line-height: 70px;
  font-size: 25px;
  margin: 0px 50px;
  cursor: pointer;
}
.header-button {
  width: 100px;
  height: 30px;
  margin: 20px 30px;
  border: 1px #fff solid;
  border-radius: 25px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.header-button:hover {
  box-shadow: 0px 0px 20px #5babd1;
}
.header-text {
  display: flex;
}
.header-text span {
  display: inline-block;
  line-height: 70px;
  padding: 0px 20px;
  cursor: pointer;
}
.header-text span:hover {
  text-shadow: 1px 1px 5px #fff;
}
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  min-width: 1200px;
  min-height: 700px;
  max-width: 100vw;
  overflow-y: hidden;
}
.main-first {
  background: #090b15;
  overflow: hidden;
  border: 0px;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #5babd1, #b7baaf) 1;
  color: #fff;
  height: 90vh;
}
.main-first-content {
  text-align: center;
  padding-top: 15%;
}
.main-first-content__h1 {
  font-size: 50px;
}
.main-first-content__h1 b {
  color: #5babd1;
  margin: 0px 12px;
}
.main-first-content__button {
  width: 200px;
  height: 40px;
  margin: 5% auto 1%;
  border: 1px #fff solid;
  border-radius: 25px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.main-first-content__text {
  color: #5babd1;
  font-size: 10px;
}
.ball {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  transition: all 2s;
}
.ball1 {
  background: radial-gradient(
    circle at 124px 3px,
    #5babd1,
    #5babd1,
    #3689c0,
    #5babd1,
    #386a8b,
    #666
  );
  box-shadow: 0px -5px 40px #5babd1;
  position: absolute;
  bottom: -100px;
  width: 20vw;
  height: 20vw;
  min-width: 200px;
  min-height: 200px;
  left: 40%;
  animation-name: ball1-example;
  animation-duration: 4s;
}
@keyframes ball1-example {
  from {
    left: 90%;
    bottom: 300px;
    transform: rotate(397deg);
  }
  to {
    left: 40%;
    bottom: -100px;
    transform: rotate(0deg);
  }
}
.ball1:hover {
  box-shadow: 0px -15px 80px #5babd1;
}
.ball2 {
  background: radial-gradient(
    circle at 10px 3px,
    #b7baaf,
    #c9c5cf,
    #938b90,
    #b3af9c,
    #524729,
    #666
  );
  box-shadow: 0px -5px 40px #b7baaf;
  position: absolute;
  top: 20%;
  width: 10vw;
  height: 10vw;
  min-width: 100px;
  min-height: 100px;
  left: 10%;
  transform: rotate(97deg);
  animation-name: ball2-example;
  animation-duration: 5s;
}
@keyframes ball2-example {
  from {
    left: 40%;
    top: 80%;
    transform: rotate(497deg);
  }
  to {
    top: 20%;
    left: 10%;
    transform: rotate(97deg);
  }
}
.ball2:hover {
  box-shadow: 0px -5px 68px #b7baaf;
}
.ball3 {
  background: radial-gradient(
    circle at 10px 3px,
    #dfabdf,
    #916e91,
    #692d50,
    #6b344b,
    #3f1818,
    rgb(70, 27, 27)
  );
  box-shadow: 0px 0px 30px #a38ea3;
  position: absolute;
  top: 20%;
  width: 6vw;
  height: 6vw;
  min-width: 50px;
  min-height: 50px;
  right: 10%;
  animation-name: ball3-example;
  animation-duration: 3s;
}
.ball3:hover {
  box-shadow: 0px -5px 48px #e9b2e9;
}
@keyframes ball3-example {
  from {
    right: 60%;
    top: -10%;
    transform: rotate(497deg);
  }
  to {
    top: 20%;
    right: 10%;
    transform: rotate(0deg);
  }
}
.main-second {
  background: #090b15;
  color: #fff;
  /* display: flex; */
  /* z-index: 100; */
}
.main-second-left {
  text-align: center;
}
.main-second-left__text {
  color: #5babd1;
  font-size: 10px;
  margin: 40px 0px 20px;
}
.main-second-left__h1 {
  font-size: 50px;
  padding-top: 10%;
}

.main-second-right {
  width: 1200px;
  margin: auto;
}

.main-second-right__item {
  width: 100px;
  height: 100px;
  background: #3689c0;
  display: inline-block;
  padding: 80px 100px 120px 100px;
  text-align: center;
  opacity: 80%;
}
.main-second-right__item:nth-child(2) {
  background: #5babd1;
}
.main-second-right__item:nth-child(3) {
  background: #916e91;
}
.main-second-right__item:nth-child(4) {
  background: #8f41e9;
}
.main-second-right__item:hover {
  opacity: 100%;
}
.main-second-right__item i {
  font-size: 70px;
  margin: 20px 10px;
}
.main-third {
  background-color: #f2eff5;
  overflow: inherit;
  height: 80vh;
}
.main-third__form {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 0%);
  border: 0px;
  border-top: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #5babd1, #b7baaf) 1;
  width: 600px;
  height: 600px;
  background-color: #fff;
}
.main-third__form:hover {
  box-shadow: 1px 5px 30px #5babd1;
}
.main-third__form-title {
  font-size: 40px;
  line-height: 150px;
  text-align: center;
}
.el-form {
  width: 400px;
  margin: 20px 90px;
}
.el-form .el-button {
  width: 400px;
  margin: 60px 0px 10px;
  cursor: pointer;
}
.el-form .el-button:nth-child(2) {
  margin: 10px 0px !important;
}
footer {
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-align: center;
  padding: 20px 0px;
}
</style>